<template>

  <view class="msgList">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(service, index) in serviceList" :key="index">
        <u-cell @click="linkInner">
          <u-avatar
              slot="icon"
              shape="square"
              size="35"
              :src="service.avatar"
              customStyle="margin: -3px 5px -3px 0"
          ></u-avatar>
          <view slot="title" class="textBox">
            <view class="title">
              <view class="info">{{ service.name }}</view>
            </view>
            <view class="content">
              <view class="info2">{{ service.telePhone }}</view>
            </view>
          </view>
        </u-cell>
      </u-list-item>
    </u-list>
  </view>

</template>


<script>
import { serviceList } from "../../http/customerService";


export default {
  components: {},
  data() {
    return {
      serviceList: [],
      language: {},
      bannsrList: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/1.jpg",
      ],
      indexList: [],
      urls: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
        "https://cdn.uviewui.com/uview/album/6.jpg",
        "https://cdn.uviewui.com/uview/album/7.jpg",
        "https://cdn.uviewui.com/uview/album/8.jpg",
        "https://cdn.uviewui.com/uview/album/9.jpg",
        "https://cdn.uviewui.com/uview/album/10.jpg",
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
    this.loadmore();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {


    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
    },
    scrolltolower() {
      this.loadmore();
    },
    loadmore() {
      // 假设serviceList方法用于请求客服列表
      serviceList({ pageNum: 1, pageSize: 10 }).then(response => {
        this.serviceList = response.rows; // 假设返回的列表在response.rows中
      }).catch(error => {
        console.error('请求客服列表失败:', error);
      });
    },
    linkInner() {
      uni.navigateTo({
        url: "/pages/Messag/msgInner",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0 16px;
  box-sizing: border-box;

  .msgNum {
    line-height: 40px;
    font-weight: bold;
  }

  .swiper {
    border-radius: 10px;
    min-height: 88px;
    margin-bottom: 10px;

    .imgPart {
      width: 100%;
      height: 88px;
    }
  }

  .msgList {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
      rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

    .u-avatar--square {
      border-radius: 50%;
      overflow: hidden;
    }
  }
}

.textBox {
  em {
    font-style: unset;
  }

  .title {
    overflow: hidden;
    em {
      padding-left: 30px;
      overflow: hidden;
      float: right;
      display: inline-block;
    }

    .info {
      float: left;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .info2 {
      overflow: hidden;
    }
    .infoNum {
      margin-left: 30px;
      width: 22px;
      float: right;
      display: inline-block;
      transform: translateY(3px);
    }
  }
}
</style>
